<template>
  <el-dialog title="取证明细" :visible.sync="visible" center>
    <el-container>
      <el-main>
        <el-carousel :interval="5000" arrow="always">
          <el-carousel-item v-for="item in imgList" :key="item.id">
            <img :src="item.imgpath"/>
          </el-carousel-item>
        </el-carousel>
      </el-main>
    </el-container>
  </el-dialog>
</template>

<script>
  import { getDetailPic } from '../../../api/operating/parkingFlow'

  export default {
    name: 'parking-detail-dialog',
    data() {
      return {
        imgList: [],
        visible: false
      }
    },
    props: ['dialogDetailVisible', 'detailPark'],
    watch: {
      dialogDetailVisible: function(val) {
        this.visible = val
        if (val) {
          getDetailPic(this.detailPark.account).then(res => {
            this.imgList = res.list
          })
        }
      },
      visible: function(val) {
        this.$emit('update:dialogDetailVisible', val)
      }
    },
    methods: {
    }
  }
</script>

<style scoped>
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>
